<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="系统通知"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <van-swipe-cell v-for="(item, index) in newws" :key="index">
          <van-cell>
            <div class="newsbox">
              <div class="img">
                <img :src=item.img alt="" style="width:.40rem;height:.40rem">
              </div>
              <div class="panel">
                <p class="name">{{ item.name }}</p>
                <p class="time">{{ item.time }}</p>
                <p class="new">{{ item.new }}</p>
              </div>
            </div>
          </van-cell>
        <template #right  right-width=".55rem">
          <van-button square type="danger" text="删除" @click="deleteFn(index)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, SwipeCell, Button, Cell } from 'vant'
Vue.use(NavBar)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Cell)
export default {
  // 设置data初始值
  data () {
    return {
      newws: [
        {
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: '小懒猪记账',
          time: '04-25 09:24',
          new: '您已经连续三天签到到卡,给您点赞,请您持续保持哦~'
        },
        {
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: '小懒猪记账',
          time: '04-26 09:24',
          new: '您已经连续四天签到到卡,给您点赞,请您持续保持哦~'
        },
        {
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'),
          name: '小懒猪记账',
          time: '04-27 09:24',
          new: '您已经连续五天签到到卡,给您点赞,请您持续保持哦~'
        }
      ]
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 删除按钮
    deleteFn (index) {
      // console.log('删除')
      // console.log(index)
      this.newws.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    .newsbox {
      display: flex;
      margin-top: .05rem;
      // 头像框
      .img {
        text-align: center;
        width: 15%;
      }
      // 消息框
      .panel {
        flex: 1;
        padding-right: .15rem;
        // 消息昵称
        .name {
          font-size: .14rem;
          line-height: .20rem;
        }
        // 时间
        .time {
          font-size: .13rem;
          color: #c3c3c3;
          margin-bottom: .05rem;
          line-height: .20rem;
        }
        // 消息
        .new {
          font-size: .15rem;
          line-height: .20rem;
        }
      }
    }
    // 左滑删除
    /deep/ .van-button {
      height: 1.35rem;
    }
  }
</style>
